<template>
    <div class="base-page"  :style="{ height:screenHeight-20+'px'}">
        <!-- 列表 -->
        <div style="height:100%"  class="right" v-show="viewList === true">
            <div class="e-table">
                <div class="top right-div1">
                    <div class="left">
                        <div class="left-btn">
                            <el-button type="primary" size="mini"
                                @click="goAdd"
                                class="btn-greenYellow"
                            >新增</el-button>
                            <!-- <el-button type="default" size="mini"
                            >导入</el-button>
                            <el-button type="default" size="mini"
                            >导出</el-button> -->
                        </div>
                    </div>
                    <div class="search_box">
                        <el-input class="ipt" type="text"
                            placeholder="输入搜索关键字"
                            v-model="searchKey"
                            @select="onSearch"
                            @change="onSearch"
                        ><img src="@/assets/search.png" slot="suffix" @click="onSearch" /></el-input>
                    </div>
                </div>
            </div>
            <div class="e-table" :style="{ height:screenHeight-50+'px'}">
                <el-table
                    :data="tableData"
                    border
                    row-key="kvId"
                    :cell-class-name="cellClsNm"
                    @cell-mouse-enter="cellMouseEnter"
                    @cell-mouse-leave="cellMouseLeave"
                    @current-change="tableSelect"
                    class="table"
                    highlight-current-row
                >
                    <el-table-column label="序号" type="index" fixed width="55"> </el-table-column>
                    <el-table-column prop="kvKey" label="描述" min-width="200"
                        class-name="blue-column"
                    >
                        <template slot-scope="{ row }">
                            <span @click="tableDbEdit(row)">{{ row.kvKey || '无'}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="kvStatus" label="启用状态" width="200">
                        <template slot-scope="{ row }">
                            <span>{{['否','是'][row.kvStatus]}}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <!-- 新增编辑界面 -->
        <div class="right" v-if="viewList === 'add' || viewList === 'edit'">
            <div class="e-form" style="padding: 0 10px 10px;">
                <div class="tabs-title">{{ dicName }}</div>
                <el-form ref="formRef" :rules="rules" :model="formData" label-width="150px">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="描述：" prop="kvKey">
                                <el-input v-model="formData.kvKey" placeholder="请输入描述"></el-input>
                            </el-form-item>
                        </el-col>
                         <el-col :span="12">
                            <el-form-item label="是否启用：" prop="kvStatus">
                              <el-checkbox v-model="formData.kvStatus" :true-label="1" :false-label="0"></el-checkbox>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <div class="footer">
                <div class="right-btn">
                    <el-button type="primary"
                        @click="onSave"
                    >保存</el-button>
                    <el-button type="primary"
                        class="btn-delete"
                        v-if="formData.kvId"
                        @click="onDel"
                    >删除</el-button>
                    <el-button type="default"
                        @click="onCancel"
                    >取消</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import '@/utils/jquery.scrollTo.min'
// import SelectOrg from '@/components/selectOrg'
// import Pagination from '@/components/pagination/pagination'
import { debounce } from '@/utils/common'
import { getCurrency, setCurrency, deleteCurrency } from '@/api/base/currency'
export default {
    components: {
        // Pagination,
        // SelectOrg
    },
    data () {
        return {
            viewList: true, // 显示列表还是编辑界面: true 显示列表 false 显示编辑界面
            searchKey: '',
            treeData: [],
            paginationInfo: {
                total: 0,
                pageSize: 20,
                currentPage: 1,
            },
            tableData: [],
            formData: {},
            rules: {
                kvKey: [
                    { required: true, message: '请输入描述', trigger: 'blur' },
                ],
                kvStatus: [
                    { required: true, message: '请选择是否启用', trigger: 'blur' },
                ]
            },
            params: {
                dicName: '',
                dicKey: '',
                isEnable: false
            },
            MouseEnterId: 0,
            selectData: null,
            currencyOptions: [],
            tabsName: 'baseInfo',
            tableData2: [],
            screenWidth: 0,
            screenHeight: 0,
            lastConHeight: 0,
            clickTabFlag: false, // 如果手动点击时，则不做滚动事件逻辑，只有滚动屏幕时才走滚动事件逻辑
            idsTop: []
        }
    },
    props: {
        dicName: {
            type: String,
            default: ''
        }
    },
    computed: {
        // 列表宽度
        rightTableWidth () {
            return (this.screenWidth - 280) + 'px'
        },
        // 分配用户、分配岗位列表宽度
        rightTableWidth2 () {
            return (this.screenWidth - 300) + 'px'
        }
    },
    created () {
        this.getTableData()
    },
    mounted () {
        // 获取屏幕宽高
        this.getScreenInfo()
        window.addEventListener('resize', debounce(this.getScreenInfo))
    },
    methods: {
        getTableData () {
            this.params.dicName = this.dicName
            getCurrency(this.params).then(res=>{
                this.tableData = res
            })
        },
        onSelectOrg (val) {
            console.log('onSelectOrg: ', { ...val })
            this.formData = {
                ...val,
                currency: 10
            }
        },
        cellClsNm ({ column }) {
            if (column.label === '') {
                return 'fixed-left'
            }
        },
        onSearch (e) {
            let searchKey = e
            if (typeof e === 'object') {
                searchKey = this.searchKey
            }
            this.params.dicKey = searchKey
            this.getTableData()
        },
        goAdd () {
            this.viewList = 'add'
            this.formData = {
                'kvId': '',
                'kvKey': '',
                'kvStatus': 1,
                'kvValue': ''
            }
        },
        onEdit () {
            if(!this.selectData) return
            this.viewList = 'edit'
            this.formData = this.selectData
        },
        onDistPost () {
            this.viewList = 'post'
        },
        onSave () {
            this.$refs['formRef'].validate(async valid => {
                if (valid) {
                    this.formData.dicName = this.dicName
                    this.formData.kvValue = this.formData.kvKey
                    if(this.dicName === '币种') {
                        this.formData.kvValue = null
                    }
                    setCurrency(this.formData).then(()=>{
                        this.clientPop('suc', '保存成功', ()=>{ this.viewList = true;this.getTableData() })
                    })
                }
            })
        },
        onDel () {
            this.clientPop('info', '确定要删除吗？数据删除后不可恢复，请谨慎操作', () => {
                deleteCurrency({
                    ...this.formData,
                    dicName: this.dicName
                }).then(() => {
                    this.clientPop('suc', '删除成功', ()=>{
                        this.viewList = true
                        this.getTableData()
                    })
                })
            })
        },
        //取消
        onCancel () {
            this.viewList = true
        },
        //表格选中
        tableSelect ( row ) {
            this.selectData = row
        },
        getScreenInfo () {
            let screenWidth = document.documentElement.clientWidth || document.body.clientWidth
            let screenHeight = document.documentElement.clientHeight || document.body.clientHeight
            this.screenWidth = screenWidth
            this.screenHeight = screenHeight
        },
        cellMouseEnter (row) {
            this.MouseEnterId = row.kvValue
        },
        cellMouseLeave () {
            this.MouseEnterId = 0
        },
        //编辑
        tableDbEdit (row) {
            if(!row) return
            this.formData = row
            this.viewList = 'edit'
        },
    }
}
</script>

<style lang="scss" scoped>
.right{
    border: none;
}
</style>
